<template>
<div>
  <div style="padding: 20px">
    <div class="opt-area-02">
      <div class="input-frame" style="width: 100%;text-alone:left;margin-bottom:10px;font-size: 14px">
      </div>
      <div class="left-con">
        <div class="input-frame" style="width: 164px">
          <Select :disabled="severUserInfo.company_grade === '3'" v-if="severUserInfo.company_grade === '2' || severUserInfo.company_grade === '3'" placeholder="请选择区" v-model="area_id" style="width:164px" @on-change="findSubordinateList('3',area_id)">
            <Option v-for="item in areaData" :value="item.id" :key="item.id">{{ item.name }}</Option>
          </Select>
        </div>
        <div class="input-frame" style="width: 164px">
          <Select :disabled="severUserInfo.company_grade === '4'" v-if="severUserInfo.company_grade === '2' || severUserInfo.company_grade === '3' || severUserInfo.company_grade === '4' " placeholder="请选择街道" v-model="street_id" style="width:164px" >
            <Option v-for="item in streetData" :value="item.id" :key="item.id">{{ item.name }}</Option>
          </Select>
        </div>
        <div class="input-frame" style="width: 300px">
          <DatePicker v-model="hsTime" type="datetimerange" placeholder="请选择核酸检测时间" style="width: 300px"></DatePicker>
        </div>
        <Button type="info" size="small" @click="findHSTjList()" style="margin-top: 5px;margin-right:5px">查询</Button>
        <Button type="info" size="small" @click="init()" style="margin-top: 5px;margin-right:5px" :loading="tableLoading">刷新</Button>
      </div>
    </div>
    <Table border :columns="tableColumns" :data="tableData" :loading="tableLoading">
      <template slot-scope="{ row, index }" slot="state">
        <span v-show="row.state === '0'">正在查询</span>
        <span v-show="row.state === '1'">查询完毕</span>
        <span v-show="row.state === '2'">查询失败</span>
      </template>
      <template slot-scope="{ row, index }" slot="action">
        <Button :disabled="row.state !== '1'" type="primary" size="small" style="margin-right: 5px" @click="getHsDetail(row)">查看结果</Button>
      </template>
    </Table>
    <Row type="flex" justify="end" class="page_style">
      <Page :current="params.pageNo" :total="params.totalRecord" show-sizer :page-size="params.pageSize" show-elevator
            @on-change="pageAction" @on-page-size-change="pageSizeChange"/>
    </Row>
  </div>
  <Modal
      v-model="detailModal"
      title="统计结果">
    <Table border :columns="tableResultColumns" :data="tableResultData">
    </Table>
  </Modal>
</div>
</template>

<script>
import {
  createHsTask, datetime2str, findHsTaskList,
  // findHSTjList,
  findSubordinateList
} from '../../../api/eventlist'

export default {
  name: 'index',
  data () {
    return {
      tableResultColumns: [
        {
          title: '区划',
          key: 'name',
          align: 'center'
        },
        {
          title: '人数（去重）',
          key: 'num',
          align: 'center'
        },
        {
          title: '未检测人数（去重）',
          key: 'hsNum',
          align: 'center'
        }
      ],
      tableResultData: [],
      detailModal: false,
      severUserInfo: {},
      tableColumns: [
        {
          title: '区',
          key: 'area_name',
          align: 'center'
        },
        {
          title: '街道',
          key: 'street_name',
          align: 'center'
        },
        {
          title: '核酸检测开始时间',
          key: 'he_begin_time',
          align: 'center'
        },
        {
          title: '核酸检测结束时间',
          key: 'he_end_time',
          align: 'center'
        },
        {
          title: '创建查询任务时间',
          key: 'create_time',
          align: 'center'
        },
        {
          title: '状态',
          slot: 'state',
          align: 'center'
        },
        {
          title: '核酸检测实际开始时间',
          key: 'sj_h_begin_time'
        },
        {
          title: '核酸检测实际结束时间',
          key: 'sj_h_end_time'
        },
        {
          title: '操作',
          slot: 'action',
          width: 150,
          align: 'center'
        }
      ],
      tableData: [],
      tableLoading: false,
      hsTime: [],
      areaData: [],
      area_id: '',
      streetData: [],
      street_id: '',
      communityData: [],
      community_id: '',
      params: {
        pageNo: 1,
        pageSize: 10,
        totalRecord: 0
      }
    }
  },
  methods: {
    getHsDetail (e) {
      this.detailModal = true
      this.tableResultData = JSON.parse(e.hs_result)
    },
    findHSTjList () {
      let data = {}
      if (this.severUserInfo.company_grade === '2') {
        if (this.street_id === '') {
          data = {
            grade: '3',
            area_id: this.area_id
          }
        } else {
          data = {
            grade: '4',
            area_id: this.area_id,
            street_id: this.street_id
          }
        }
      } else if (this.severUserInfo.company_grade === '3') {
        if (this.street_id === '') {
          data = {
            grade: '3',
            area_id: this.area_id
          }
        } else {
          data = {
            grade: '4',
            area_id: this.area_id,
            street_id: this.street_id
          }
        }
      } else if (this.severUserInfo.company_grade === '4') {
        data = {
          grade: '4',
          area_id: this.area_id,
          street_id: this.street_id
        }
      } else {
        return
      }
      if (this.hsTime[0] === '') {
        this.$Notice.error({ title: '请选择日期', desc: '请选择核酸检测时间' })
        return
      } else {
        data.he_begin_time = datetime2str(this.hsTime[0])
        data.he_end_time = datetime2str(this.hsTime[1])
      }
      createHsTask(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.$Notice.success({ title: '创建查询任务成功', desc: ret.data.errmsg })
          this.init()
        } else {
          this.$Notice.error({ title: '创建查询任务失败', desc: ret.data.errmsg })
        }
      })
    },
    findSubordinateList (e1, e2) {
      let data = {
        grade: e1,
        id: e2
      }
      findSubordinateList(data).then(ret => {
        if (ret.data.errcode === 0) {
          if (e1 === '2') {
            this.areaData = ret.data.data
          }
          if (e1 === '3') {
            this.streetData = ret.data.data
          }
        } else {
          this.$Notice.error({ title: '查询列表信息失败', desc: ret.data.errmsg })
        }
      })
    },
    init () {
      this.tableLoading = true
      let data = this.params
      findHsTaskList(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.tableData = ret.data.data.results
          this.params.totalRecord = ret.data.data.totalRecord
          this.tableLoading = false
        } else {
          this.$Notice.error({ title: '查询列表信息失败', desc: ret.data.errmsg })
        }
      })
    },
    pageAction (page) {
      this.params.pageNo = page
      this.init()
    },
    pageSizeChange (e) {
      this.params.pageSize = e
      this.init()
    }
  },
  mounted () {
    this.severUserInfo = this.$store.state.user.severUserInfo
    this.findSubordinateList('2', '999999999')
    if (this.severUserInfo.company_grade === '3') {
      this.area_id = this.severUserInfo.company_id
      this.findSubordinateList(this.severUserInfo.company_grade, this.severUserInfo.company_id)
    }
    if (this.severUserInfo.company_grade === '4') {
      this.area_id = this.severUserInfo.parent_id
      this.street_id = this.severUserInfo.company_id
    }
    this.init()
  }
}
</script>

<style scoped>
.page_style {
  margin: 20px 5px;
}

.input-frame {
  width: 120px;
  margin-right: 10px;
  float: left;
}

.house-list > .group {
  background: white;
  padding: 10px;
  margin-top: 10px;
}

.house-list > .group > .item {
  border-bottom: 1px solid #f5f5f5;
  padding: 10px 0;
}

.house-list > .group > .item .top {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}

.house-list > .group > .item .title {
  font-size: 14px;
  color: #333333;
}

.house-list > .group > .item .address {
  font-size: 12px;
  color: gray;
  display: flex;
  align-items: center;
}

.house-list > .group > .item .detail {
  font-size: 12px;
  color: dodgerblue;
}

.opt-area-02 {
  display: flex;
  align-items: center;
  flex-direction: column;
  border: 1px solid #abdcff;
  background-color: #f0faff;
  padding: 8px 16px 8px 16px;
  border-radius: 4px;
  margin-bottom: 10px;
}

.opt-area-02 .right-con {
  width: 100%;
  margin-top: 5px;
  display: flex;
}

.opt-area-02 .left-con {
  font-size: 14px;
  width: 100%;
}

.opt-area-02 .left-con span {
  font-weight: bold;
}

.opt-area-02 .right-con input {
  width: 150px;
  margin-right: 10px;
}

.opt-area-02 .right-con .input-frame {
  width: 200px;
  margin-right: 10px;
}

.table-action-btn {
  margin-bottom: 3px;
}

.container >>> .ivu-btn-small {
  height: 24px;
  padding: 0 5px;
  font-size: 12px;
  border-radius: 3px;
}

.btn-action {
  margin-bottom: 10px;
}

.mp10 {
  margin-right: 10px;
}
.title-style {
  color: red;
}
.mb20 {
  margin-bottom: 20px;
}
.ivu-table-row {
  height: 57px;
}
.demo-spin-icon-load{
  animation: ani-demo-spin 1s linear infinite;
}
@keyframes ani-demo-spin {
  from { transform: rotate(0deg);}
  50%  { transform: rotate(180deg);}
  to   { transform: rotate(360deg);}
}
.demo-spin-col{
  height: 100px;
  position: relative;
  /*border: 1px solid #eee;*/
}
.container>>>.ivu-icon-ios-arrow-forward:before{
  color: black;
}
</style>
